import { style } from '@vanilla-extract/css';
import { brighten, fallBackGlobalStyle } from '../../theme/tools';
import { vars } from '../../theme/vars.css';

export const inlineStyle = style({
	display: 'static',
	height: '1em',
	lineHeight: '1em',
	minWidth: '3em',
	position: 'relative',
	outline: 'none',
	textAlign: 'center',
	padding: '0 1em',
	borderBottom: `1px solid ${vars.color.border}`,
	selectors: {
		'&:focus-within': {
			borderBottom: `1px solid ${vars.color.accent}`,
			// boxShadow: `inset 0 1px 2px ${vars.color.accent},inset 0 -1px 2px ${vars.color.accent}`,
		},
		'&.invalid': {
			backgroundColor: brighten('red', 0.4),
		},
	},
});

fallBackGlobalStyle(
	`${inlineStyle}.invalid`,
	{
		backgroundColor: '#f44',
	},
	{
		backgroundColor: '#a00',
	},
);
